<template>
	<view class="indexQuickLinkBox">
		<view class="indexQuickLink" @click="goMakeMoka">
			<view class="QuickLinkIcon worksicon"></view>
			<view>制作模卡</view>
		</view>
		<view class="indexQuickLink" @click="switchTab(1)">
			<view class="QuickLinkIcon ordericon"></view>
			<view>约单</view>
		</view>
		<view class="indexQuickLink" @click="gotoMsgPage(2)">
			<view class="QuickLinkIcon msgicon"></view>
			<view>聊天室</view>
		</view>
		<view class="indexQuickLink" @click="gotoMsgPage(3)">
			<view class="QuickLinkIcon articon"></view>
			<view>VIP聊天室</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'IndexMenu',
	methods: {
		switchTab(index) {
			this.$emit("switchTab", index);
		},
		goMakeMoka() {
			this.$emit("goMakeMoka");
		},
		gotoMsgPage(MsgGroupID) {
			this.$emit("gotoMsgPage", MsgGroupID); 
		}
	},
}
</script>

<style>
	.indexQuickLinkBox {
		margin:auto;
		margin-top:20rpx;
		width:96vw;
		height: 200rpx;
		background-color: #FFF;
		border-radius:20rpx;
		display:flex;
		justify-content:center;
	}
	.indexQuickLink {
		width:20vw;
		height:200rpx;
		text-align: center;
		margin:10rpx;
	}
	.QuickLinkIcon {
		width:100rpx;
		height:100rpx;
		background-color: #CCC;
		border-radius:100rpx;
		margin:auto;
		margin-bottom:20rpx
	}
	.ordericon {
		background-color: #FFAC87;
		background-image: url('@/static/icon/order.png');
		background-size: 55%;
		background-position: center;
		background-repeat: no-repeat;
	}
	.worksicon {
		background-color: #97f200;
		background-image: url('@/static/icon/works.png');
		background-size: 60%;
		background-position: center;
		background-repeat: no-repeat;
	}
	.articon {
		background-color: #FFDD00;
		background-image: url('@/static/icon/arter.png');
		background-size: 60%;
		background-position: center;
		background-repeat: no-repeat;
	}
	.msgicon {
		background-color: #00cbff;
		background-image: url('@/static/icon/msg.png');
		background-size: 50%;
		background-position: center;
		background-repeat: no-repeat;
	}
</style>